<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="top-header">
      <view class="logo">
        <text>❤️</text>
        <text>志愿者</text>
      </view>
      <view class="top-search">
        <view class="top-search-box">
          <text class="top-search-icon">🔍</text>
          <input class="top-search-input" placeholder="搜索一下" />
        </view>
      </view>
      <view class="top-right">
        <button class="login-btn" @click="handleLogin">请登录</button>
        <view class="user-avatar">👤</view>
      </view>
    </view>

    <!-- 标签栏 -->
    <view class="tab-bar">
      <navigator url="/pages/cmt/index" class="tab-item active">首页</navigator>
      <navigator url="/pages/venues/index" class="tab-item">实践阵地</navigator>
      <navigator url="/pages/cmt/ranking" class="tab-item">志愿数据</navigator>
      <navigator url="/pages/policy/index" class="tab-item">政策文件</navigator>
    </view>

    <!-- 横幅区域 -->
    <view class="banner-area">
      <view class="banner-pattern"></view>
      <view class="banner-content">
        <view class="banner-image-container">
          <image
            v-for="(img, index) in bannerImages"
            :key="index"
            :src="img.src"
            :alt="img.alt"
            class="banner-image"
            :class="{ active: currentBannerIndex === index }"
            mode="aspectFill"
          />
          <view class="banner-dots">
            <view
              v-for="(img, index) in bannerImages"
              :key="index"
              class="banner-dot"
              :class="{ active: currentBannerIndex === index }"
              @click="showBannerImage(index)"
            ></view>
          </view>
        </view>
      </view>
    </view>

    <!-- 通知播报区域 -->
    <view class="notice-broadcast">
      <text class="broadcast-icon">📢</text>
      <view class="broadcast-content">
        <text class="broadcast-text">【最新通知】欢迎参加志愿服务活动！ 北海市贝雕博物馆开放日活动报名中，名额有限，先到先得！ 平安街社区民族团结主题活动即将开始...</text>
      </view>
    </view>

    <!-- 功能网格 -->
    <view class="function-grid">
      <navigator
        v-for="func in functionList"
        :key="func.name"
        :url="func.url"
        class="function-item"
      >
        <view class="function-icon" :class="func.color">{{ func.icon }}</view>
        <view class="function-name">{{ func.name }}</view>
      </navigator>
    </view>

    <!-- 志愿服务卡片 -->
    <view class="service-section">
      <view class="service-header">
        <text class="service-icon">🤝</text>
        <text class="service-title">志愿服务</text>
      </view>
      <view class="service-cards">
        <navigator
          v-for="service in serviceList"
          :key="service.title"
          :url="service.url"
          class="service-card"
        >
          <image :src="service.image" class="service-card-bg" mode="aspectFill" />
          <view class="service-card-title">{{ service.title }}</view>
        </navigator>
      </view>
    </view>

    <!-- 大图展示区域 -->
    <view class="big-image-section">
      <navigator url="/pages/activity/detail" class="big-image-container">
        <image src="/static/img/贝雕博物馆.jpg" class="big-image" mode="aspectFill" />
      </navigator>
    </view>

    <!-- 活动招募区域 -->
    <view class="activity-recruit-section">
      <view class="recruit-header">
        <view class="recruit-title">
          <text class="recruit-icon">📋</text>
          <text class="recruit-title-text">活动招募</text>
        </view>
        <navigator url="/pages/activities/index" class="recruit-more">更多 ></navigator>
      </view>
      <view class="recruit-grid">
        <navigator
          v-for="item in recruitList"
          :key="item.name"
          :url="item.url"
          class="recruit-item"
        >
          <view class="recruit-item-icon" :class="item.color">{{ item.icon }}</view>
          <view class="recruit-item-name">{{ item.name }}</view>
        </navigator>
      </view>
    </view>

    <!-- 志愿大数据区域 -->
    <view class="data-stats-section">
      <view class="stats-header">
        <view class="stats-title">
          <text class="stats-icon">📊</text>
          <text class="stats-title-text">站站融通大数据</text>
        </view>
        <view class="stats-update-time">更新时间：每天0点0分</view>
      </view>
      <view class="stats-grid">
        <view v-for="stat in statsList" :key="stat.label" class="stats-item">
          <view class="stats-number">{{ stat.number }}</view>
          <view class="stats-label">{{ stat.label }}</view>
        </view>
      </view>
    </view>

    <!-- 志愿精神横幅 -->
    <view class="volunteer-spirit-section">
      <view class="spirit-banner">
        <view class="spirit-title">志愿精神</view>
        <view class="spirit-values">
          <view class="spirit-value">奉献</view>
          <view class="spirit-value">友爱</view>
          <view class="spirit-value">互助</view>
          <view class="spirit-value">进步</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

// 轮播图相关
const currentBannerIndex = ref(0)
const bannerImages = ref([
  { src: '/static/img/习大大鼓励志愿者.png', alt: '习大大鼓励志愿者' },
  { src: '/static/img/习近平对社会工作作出重要指示.png', alt: '习近平对社会工作作出重要指示' },
  { src: '/static/img/学习贯彻第二十届三中全会精神.png', alt: '学习贯彻第二十届三中全会精神' },
  { src: '/static/img/bg.jpg', alt: '志愿者' }
])

let bannerInterval = null

const showBannerImage = (index) => {
  currentBannerIndex.value = index
}

const nextBannerImage = () => {
  currentBannerIndex.value = (currentBannerIndex.value + 1) % bannerImages.value.length
}

const startBannerCarousel = () => {
  bannerInterval = setInterval(nextBannerImage, 3000)
}

const stopBannerCarousel = () => {
  if (bannerInterval) {
    clearInterval(bannerInterval)
    bannerInterval = null
  }
}

// 功能列表
const functionList = ref([
  { name: '用户注册', icon: '👤', color: 'green', url: '/pages/join-practice/index' },
  { name: '加入团队', icon: '👥', color: 'orange', url: '/pages/join-team/index' },
  { name: '团队入驻', icon: '❤️', color: '', url: '/pages/team-register/index' },
  { name: '文明积分', icon: '👑', color: '', url: '/pages/cmt/ranking' },
  { name: '阵地预约', icon: '⭐', color: 'yellow', url: '/pages/venues/index' },
  { name: '云上课堂', icon: '🎓', color: 'teal', url: '/pages/courses/index' },
  { name: '实践活动', icon: '🏃', color: 'blue', url: '/pages/activities/index' }
])

// 志愿服务列表
const serviceList = ref([
  { title: '幸福黄石港', image: '/static/img/853b4aea-acb0-4bcf-b26b-ca285bdafe91.png', url: '/pages/services/detail?id=1' },
  { title: '主流西塞', image: '/static/img/87ce05ef-cd7e-4d75-8bff-a44995bfca6a.png', url: '/pages/services/detail?id=2' },
  { title: '省善下陆', image: '/static/img/a3673c98-7a12-4e07-939d-6112c640e728.png', url: '/pages/services/detail?id=3' },
  { title: '魅力铁山', image: '/static/img/bg.jpg', url: '/pages/services/detail?id=4' }
])

// 招募列表
const recruitList = ref([
  { name: '理论宣讲', icon: '🎓', color: 'green', url: '/pages/recruit/detail?type=1' },
  { name: '文化文艺', icon: '🎨', color: 'yellow', url: '/pages/recruit/detail?type=2' },
  { name: '助学支教', icon: '👨‍🏫', color: 'orange', url: '/pages/recruit/detail?type=3' },
  { name: '医疗健身', icon: '🏥', color: 'red', url: '/pages/recruit/detail?type=4' },
  { name: '科学普及', icon: '🔬', color: 'blue', url: '/pages/recruit/detail?type=5' },
  { name: '法律服务', icon: '⚖️', color: 'red', url: '/pages/recruit/detail?type=6' },
  { name: '卫生环保', icon: '🌱', color: 'green', url: '/pages/recruit/detail?type=7' },
  { name: '扶贫帮困', icon: '🤝', color: 'yellow', url: '/pages/recruit/detail?type=8' },
  { name: '社会治安', icon: '❤️', color: 'orange', url: '/pages/recruit/detail?type=9' },
  { name: '文明交通', icon: '🚌', color: 'blue', url: '/pages/recruit/detail?type=10' }
])

// 统计数据
const statsList = ref([
  { number: '220190', label: '注册志愿者人数' },
  { number: '71883', label: '志愿服务活动开展数' },
  { number: '24', label: '今日新增志愿者数' },
  { number: '1630', label: '志愿组织注册数' },
  { number: '3574557', label: '组织累计志愿服务时长' },
  { number: '117', label: '今日新增活动数' }
])

// 登录处理
const handleLogin = () => {
  uni.navigateTo({
    url: '/pages/login/index'
  })
}

// 生命周期
onMounted(() => {
  startBannerCarousel()
})

onUnmounted(() => {
  stopBannerCarousel()
})
</script>

<style scoped>
.container {
  background: #f5f5f5;
  min-height: 100vh;
}

/* 顶部导航栏 */
.top-header {
  background: linear-gradient(to right, #EC3432 0%, #FA7E3A 100%);
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.logo {
  color: white;
  font-size: 20px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 5px;
}

.top-search {
  flex: 1;
  max-width: 220px;
  margin: 0 20px;
}

.top-search-box {
  background: rgba(255,255,255,0.95);
  border-radius: 22px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.top-search-icon {
  color: #999;
  font-size: 14px;
  margin-right: 5px;
}

.top-search-input {
  flex: 1;
  font-size: 13px;
  border: none;
  outline: none;
}

.top-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.login-btn {
  background: none;
  border: none;
  color: white;
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  line-height: 1;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 22px;
  border: 2px solid rgba(255,255,255,0.3);
}

/* 标签栏 */
.tab-bar {
  background: #FFF2E3;
  display: flex;
  justify-content: space-around;
  padding: 14px 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

.tab-item {
  color: #666;
  font-size: 15px;
  text-decoration: none;
  position: relative;
  padding-bottom: 6px;
  font-weight: 500;
}

.tab-item.active {
  color: #c62828;
  font-weight: bold;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: linear-gradient(to right, #c62828 0%, #e53935 100%);
  border-radius: 2px;
}

/* 横幅区域 */
.banner-area {
  position: relative;
  overflow: hidden;
  margin: 0 20px 15px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.banner-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.banner-image-container {
  position: relative;
  width: 100%;
  height: 205px;
  overflow: hidden;
}

.banner-image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.banner-image.active {
  opacity: 1;
}

.banner-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}

.banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  transition: all 0.3s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.banner-dot.active {
  background: white;
  width: 24px;
  border-radius: 4px;
}

/* 通知播报区域 */
.notice-broadcast {
  background: #FFF1E0;
  margin: 0 20px 12px 20px;
  padding: 5px 15px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 6px rgba(255,193,7,0.25);
  overflow: hidden;
}

.broadcast-icon {
  color: #f57c00;
  font-size: 20px;
}

.broadcast-content {
  flex: 1;
  overflow: hidden;
  position: relative;
  height: 16px;
}

.broadcast-text {
  color: #e65100;
  font-size: 14px;
  white-space: nowrap;
  animation: scroll-left 20s linear infinite;
}

@keyframes scroll-left {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* 功能网格 */
.function-grid {
  background: white;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 15px;
  padding: 20px 15px;
  margin: 0 20px 15px 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #333;
}

.function-icon {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 8px;
  background: linear-gradient(to right, #d32f2f 0%, #e53935 50%, #ef5350 100%);
  box-shadow: 0 3px 10px rgba(211,47,47,0.3);
}

.function-icon.green {
  background: linear-gradient(to right, #388e3c 0%, #4caf50 50%, #66bb6a 100%);
  box-shadow: 0 3px 10px rgba(56,142,60,0.3);
}

.function-icon.blue {
  background: linear-gradient(to right, #1976d2 0%, #2196f3 50%, #42a5f5 100%);
  box-shadow: 0 3px 10px rgba(25,118,210,0.3);
}

.function-icon.orange {
  background: linear-gradient(to right, #f57c00 0%, #ff9800 50%, #ffa726 100%);
  box-shadow: 0 3px 10px rgba(245,124,0,0.3);
}

.function-icon.yellow {
  background: linear-gradient(to right, #f9a825 0%, #ffc107 50%, #ffd54f 100%);
  box-shadow: 0 3px 10px rgba(249,168,37,0.3);
}

.function-icon.teal {
  background: linear-gradient(to right, #00796b 0%, #009688 50%, #26a69a 100%);
  box-shadow: 0 3px 10px rgba(0,121,107,0.3);
}

.function-name {
  font-size: 13px;
  color: #333;
  font-weight: 500;
  text-align: center;
}

/* 志愿服务区域 */
.service-section {
  background: white;
  padding: 15px;
  margin: 0 20px 15px 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.service-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
}

.service-icon {
  font-size: 20px;
}

.service-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.service-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.service-card {
  position: relative;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 100%);
  z-index: 1;
}

.service-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.service-card-title {
  position: relative;
  z-index: 2;
  font-size: 15px;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* 大图展示区域 */
.big-image-section {
  margin: 0 20px 15px 20px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  height: 80px;
}

.big-image-container {
  position: relative;
  width: 100%;
  height: 80px;
  overflow: hidden;
  display: block;
}

.big-image {
  width: 100%;
  height: 80px;
  display: block;
}

/* 活动招募区域 */
.activity-recruit-section {
  background: white;
  padding: 15px;
  margin: 0 20px 15px 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.recruit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.recruit-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.recruit-icon {
  font-size: 20px;
}

.recruit-title-text {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.recruit-more {
  font-size: 14px;
  color: #999;
  text-decoration: none;
}

.recruit-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px 10px;
}

.recruit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #333;
}

.recruit-item-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 8px;
  background: #f5f5f5;
}

.recruit-item-icon.green {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
}

.recruit-item-icon.yellow {
  background: linear-gradient(135deg, #fff9c4 0%, #fff59d 100%);
}

.recruit-item-icon.orange {
  background: linear-gradient(135deg, #ffe0b2 0%, #ffcc80 100%);
}

.recruit-item-icon.red {
  background: linear-gradient(135deg, #ffcdd2 0%, #ef9a9a 100%);
}

.recruit-item-icon.blue {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}

.recruit-item-name {
  font-size: 12px;
  color: #333;
  text-align: center;
}

/* 志愿大数据区域 */
.data-stats-section {
  background: white;
  padding: 15px;
  margin: 0 20px 15px 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.stats-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stats-icon {
  font-size: 20px;
}

.stats-title-text {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.stats-update-time {
  font-size: 12px;
  color: #999;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px 10px;
}

.stats-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stats-number {
  font-size: 24px;
  font-weight: bold;
  color: #e53935;
  margin-bottom: 5px;
}

.stats-label {
  font-size: 12px;
  color: #666;
}

/* 志愿精神横幅 */
.volunteer-spirit-section {
  margin: 0 20px 15px 20px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.spirit-banner {
  background: linear-gradient(to right, #ff6b35 0%, #ff8e53 50%, #ff9a66 100%);
  padding: 30px 20px;
  position: relative;
  overflow: hidden;
}

.spirit-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.05) 10px, rgba(255,255,255,0.05) 20px);
}

.spirit-title {
  font-size: 22px;
  font-weight: bold;
  color: white;
  text-align: center;
  margin-bottom: 20px;
  position: relative;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

.spirit-values {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
}

.spirit-value {
  color: white;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}
</style>
